<template>
    <view class="wanlshop-container">
        <view v-if="common.modulesData.homeModules.page" class="wanlshop-container__head" :style="{
            height: headHeight + 'px',
            color: common.modulesData.homeModules.page
                ? common.modulesData.homeModules.page.style.navigationBarTextStyle == '#ffffff'
                    ? '#ffffff'
                    : '#333333'
                : '',
            backgroundColor: common.modulesData.homeModules.page
                ? common.modulesData.homeModules.page.style.navigationBarBackgroundColor
                : '#f7f7f7',
            backgroundImage:
                'url(' +
                $wanlshop.oss(
                    common.modulesData.homeModules.page
                        ? common.modulesData.homeModules.page.style.navigationBackgroundImage
                        : '',
                    0,
                    50,
                    1,
                    'transparent',
                    'png'
                ) +
                ')',
        }">
            <view :style="{ height: headHeight + 'px', paddingTop: headTop + 'px' }">
                <view class="navigater flex align-center justify-between">
                    <view class="flex" @tap="scanCode">
                        <view class="text-xxl"><text class="wlIcon-saoyisao"></text></view>
                    </view>
                    <view class="search flex align-center margin-lr-sm round">
                        <view class="icon text-df text-bold wanl-gray-dark">
                            <text class="wlIcon-sousuo1"></text>
                        </view>
                        <swiper vertical autoplay circular interval="3000">
                            <swiper-item @tap="handleSearch('')">
                                <text class="wanl-gray-dark text-cut">搜索 商品、类目</text>
                            </swiper-item>
                            <swiper-item v-for="(item, index) in common.modulesData.searchModules" :key="item.keywords"
                                @tap="handleSearch(item.keywords)">
                                <text class="wanl-gray-dark text-cut">{{ item.keywords }}</text>
                            </swiper-item>
                        </swiper>
                    </view>
                    <view class="flex">
                        <!-- <view class="margin-right-bj text-xxl position-relative" @tap="$wanlshop.to('/pages/user/coupon/list')">
							<text class="wlIcon-coupon"/>
							<view class="cu-tag badge">减</view>
						</view> -->
                        <view class="margin-right-bj text-xxl position-relative" @tap="handleModal('share')">
                            <text class="wlIcon-fenxiangcopy" />
                        </view>

                        <view class="text-xxl" @tap="$wanlshop.to('/pages/notice/notice')">
                            <text class="wlIcon-xiaoxizhongxin"></text>
                        </view>
                    </view>
                </view>
                <view class="toolbar flex padding-lr-bj align-center">
                    <scroll-view class="scroll" scroll-x scroll-with-animation :scroll-left="scrollLeft">
                        <view class="scroll__item" :class="{ action: currentItemId === 'follow' }"
                            @tap="handleSelect('follow', 0)">
                            关注
                        </view>
                        <view class="scroll__item" :class="{ action: currentItemId === 'home' }"
                            @tap="handleSelect('home', 1)">
                            推荐
                        </view>
                        <view class="scroll__item" v-for="(item, index) in common.modulesData.categoryModules"
                            :key="item.id" :class="{ action: currentItemId === 'cid' + item.id }"
                            @tap="handleSelect('cid' + item.id, index + 2)">
                            {{ item.name }}
                        </view>
                    </scroll-view>
                    <view class="category flex align-center" @tap="handleModal('category')">
                        <text v-if="modalName == 'category'" class="wlIcon-fanhui3"></text>
                        <text v-else class="wlIcon-fanhui4"></text>
                    </view>
                </view>
            </view>
        </view>
        <!-- 主体 -->
        <swiper class="wanlshop-container__main" :current-item-id="currentItemId" :style="{
            height: windowHeight + 'px',
        }" @change="changeCurrent" @animationfinish="animationFinish">
            <!-- 发现页 -->
            <swiper-item item-id="follow">
                <wanl-shop-find :windowHeight="windowHeight" :headHeight="headHeight" :currentItemId="currentItemId"
                    :homeModules="common.modulesData.homeModules" :appConfig="common.appConfig" :user="user" />
            </swiper-item>
            <!-- 主页 -->
            <swiper-item item-id="home">
                <wanl-shop-page :windowHeight="windowHeight" :headHeight="headHeight" :headTop="headTop"
                    :pageModules="common.modulesData.homeModules" :adData="common.adData" />
            </swiper-item>
            <!-- 分类 -->
            <swiper-item v-for="(item, index) in common.modulesData.categoryModules" :key="item.id"
                :item-id="'cid' + item.id">
                <wanl-shop-category :cid="item.id" :headHeight="headHeight" :windowHeight="windowHeight"
                    :currentItemId="currentItemId" :homeModules="common.modulesData.homeModules"
                    :childlist="item.childlist" />
            </swiper-item>
        </swiper>
        <!-- 弹窗 -->
        <view class="WANL-MODAL" @touchmove.stop.prevent="moveHandle">
            <!-- 顶部 -->
            <view class="cu-modal top-modal" :class="modalName == 'category' ? 'show' : ''" @tap="handleModal()">
                <view class="cu-dialog padding-lr-bj padding-bottom-bj" :style="{ paddingTop: headHeight + 12 + 'px' }"
                    @tap.stop="">
                    <view class="category text-min">
                        <view class="item round bg-gray" :class="{ action: currentItemId === 'follow' }"
                            @tap="handleSelect('follow', 0)">
                            我的关注
                        </view>
                        <view class="item round bg-gray" :class="{ action: currentItemId === 'home' }"
                            @tap="handleSelect('home', 1)">
                            主页
                        </view>
                        <view class="item round bg-gray" v-for="(item, index) in common.modulesData.categoryModules"
                            :key="item.id" :class="{ action: currentItemId === 'cid' + item.id }"
                            @tap="handleSelect('cid' + item.id, index + 2)">
                            {{ item.name }}
                        </view>
                    </view>
                </view>
            </view>

            <!-- 分享 -->
            <view class="cu-modal wanl-share bottom-modal" :class="modalName == 'share' ? 'show' : ''"
                @tap="handleModal()">
                <view class="cu-dialog" @tap.stop="">
                    <wanl-share ref="wanlShare" page="pages/index" :scene="{ qr: 'i' }"
                        :scrollAnimation="scrollAnimation" @change="handleModal" />
                </view>
            </view>

            <!-- 版本更新 -->
            <view class="cu-modal" :class="{ show: update.update }">
                <view class="cu-dialog">
                    <view class="hade">
                        <image :src="$wanlshop.appstc('/common/update.png')" mode="aspectFit"></image>
                        <view class="title">
                            <view class="text-white text-bold5">{{ update.data.title }}</view>
                            <text class="text-white text-bold5"> 最新版本：{{ update.data.versionName }} </text>
                        </view>
                    </view>

                    <view class="info">
                        <view class="text-lg text-bold5"><text>更新内容：</text></view>
                        <rich-text class="wanl-gray-dark" :nodes="update.data.content" />
                        <!-- 开始下载 -->
                        <view class="margin-top-xl" v-if="update.download.start">
                            <view class="flex margin-bottom-sm">
                                <view class="cu-progress round striped active">
                                    <view class="bg-orange" :style="{ width: update.download.progress + '%' }"></view>
                                </view>
                                <text class="margin-left-sm">{{ update.download.progress }}%</text>
                            </view>
                            <view class="wanl-gray-dark text-sm text-center">
                                <text>
                                    下载中，请稍等（{{ $wanlshop.conver(update.download.totalBytesWritten) }}/{{
                                        $wanlshop.conver(update.download.totalBytesExpectedToWrite)
                                    }}）
                                </text>
                            </view>
                        </view>
                        <!-- 开始安装 -->
                        <view class="margin-top-xl text-center" v-else-if="update.download.install"> 安装中... </view>
                        <!-- 更新提示 -->
                        <view class="flex justify-around margin-top-xl" v-else>
                            <button class="cu-btn radius-bock bg-gray lg" @tap="ignore">忽略升级</button>
                            <button class="cu-btn radius-bock bg-blue lg" @tap="download">立刻升级</button>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
import wanlShopPage from "@/components/wanl-shop/page";
import wanlShopFind from "@/components/wanl-shop/find";
import wanlShopCategory from "@/components/wanl-shop/category";

export default {
    components: {
        wanlShopPage,
        wanlShopFind,
        wanlShopCategory,
    },
    computed: {
        ...mapState(["common", "user", "update"]),
    },
    data() {
        return {
            modalName: "",
            scrollAnimation: 300,
            headHeight: 75,
            windowHeight: 0,
            headTop: 0,
            currentItemId: "home",
            currentData: {},
            scrollLeft: 0,
            contentText: {
                contentdown: "下拉加载更多",
                contentrefresh: "加载中",
                contentnomore: "我是有底线的",
            },
        };
    },
    onShow() {
        // #ifdef APP-PLUS
        plus.navigator.setFullscreen(false);
        // #endif
        // 计算页面尺寸
        let sys = this.$wanlshop.wanlsys();
        this.headTop = sys.top;
        this.headHeight = sys.height + uni.upx2px(60);
        this.windowHeight = sys.windowHeight;
        // uni.setNavigationBarTitle({
        // 	title:'123'
        // })
        setTimeout(() => {
            uni.setNavigationBarColor({
                frontColor: this.$store.state.common.modulesData.homeModules.page
                    ? this.$store.state.common.modulesData.homeModules.page.style.navigationBarTextStyle
                    : "",
                backgroundColor: this.$store.state.common.modulesData.homeModules.page
                    ? this.$store.state.common.modulesData.homeModules.page.style.navigationBarBackgroundColor
                    : "",
            });
        }, 200);
    },
    onReady() {
        // 判断网络类型
        uni.getNetworkType({
            success: (res) => {
                if (res.networkType == "2g" || res.networkType == "3g" || res.networkType == "4g") {
                    this.$wanlshop.msg("当前使用非WIFI环境，请注意流量使用");
                } else if (res.networkType == "none") {
                    this.$wanlshop.msg("没有网络");
                }
            },
        });
    },
    onLoad(query) {
        // 判断是否小程序来源
        if (query.hasOwnProperty("scene")) {
            let scene = decodeURIComponent(query.scene);
            scene = this.$wanlshop.getParam(scene);
            console.log("微信小程序：", scene);
        }
    },
    methods: {
        ...mapActions({
            download: "update/download", // 立即下载
            ignore: "update/ignore", // 忽略更新
        }),
        // 选择Tag
        handleSelect(id, index) {
            this.currentItemId = id;
            this.scrollLeft = (index - 1) * 50;
        },
        // 动画
        animationFinish(e) {
            //#ifdef APP-PLUS
            this.changeCurrent(e);
            //#endif
        },
        // 滚动的tag
        changeCurrent(e) {
            this.currentItemId = e.detail.currentItemId;
            this.scrollLeft = (e.detail.current - 1) * 50;
        },
        // 弹出层
        handleModal(name) {
            // 滚动分享
            if (name == "share") {
                setTimeout(() => {
                    this.scrollAnimation = 0;
                }, 300);
            }
            // 强制关闭海报
            if (this.modalName == "share") {
                this.$refs.wanlShare.closePoster();
            }
            this.modalName = this.modalName ? null : name;
        },
        // 扫码
        scanCode() {
            // #ifndef H5
            uni.scanCode({
                success: (res) => {
                    let query = this.$wanlshop.getParam(res.result),
                        id = query.id;
                    switch (query.qr) {
                        case "g":
                            this.onGoods(id);
                            break;
                        case "gr":
                            this.$wanlshop.to(`/pages/apps/groups/goods?id=${id}&groups_id=${query.groups_id}`);
                            break;
                        case "u":
                            this.$wanlshop.to(`/pages/user/info?id=${id}`);
                            break;
                        case "fu":
                            this.$wanlshop.to(`/pages/apps/find/user?id=${id}`);
                            break;
                        case "c":
                            this.$wanlshop.on("/pages/category");
                            break;
                        case "p":
                            this.$wanlshop.to(`/pages/page/index?id=${id}`);
                            break;
                        case "s":
                            this.onShop(id);
                            break;
                        case "live":
                            // #ifdef APP-PLUS || MP-WEIXIN
                            this.$wanlshop.auth(`/pages/shop/live/live`);
                            // #endif
                            // #ifndef APP-PLUS || MP-WEIXIN
                            this.$wanlshop.msg("目前只开放App和微信小程序直播");
                            // #endif
                            break;
                        case "chat":
                            this.toChat(id);
                            break;
                    }
                },
            });
            // #endif
            // #ifdef H5
            this.$wanlshop.msg("暂不支持H5扫码");
            // #endif
        },
        // 搜索
        handleSearch(text) {
            this.$wanlshop.to(`/pages/page/search?type=goods&keywords=${text}`, "fade-in", 100);
        },
        //禁止父元素滑动 1.0.3升级
        moveHandle() { },
    },
};
</script>

<style lang="scss">
.wanlshop-container {
    &__head {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background-size: 100% auto;
        background-repeat: no-repeat;

        .navigater {
            height: 86rpx;
            padding-left: 25rpx;
            padding-right: 25rpx;
            /* #ifdef MP */
            padding-right: 200rpx;

            /* #endif */
            .search {
                flex: 1;
                background-color: #fff;
                height: 66rpx;
                border: 2rpx solid #fff;

                .icon {
                    margin: 0 20rpx;
                }

                swiper {
                    height: 100%;
                    width: 100%;
                    margin-right: 10rpx;

                    swiper-item {
                        display: flex;
                        align-items: center;
                    }
                }
            }
        }

        .toolbar {
            .scroll {
                flex: 1;
                white-space: nowrap;
                overflow: hidden;
                width: 100%;

                &__item {
                    position: relative;
                    z-index: 2;
                    font-size: 28rpx;
                    display: inline-flex;
                    height: 58rpx;
                    align-items: center;
                    margin-right: 40rpx;

                    &.action {
                        position: relative;
                        font-weight: bold;
                        font-size: 30rpx;

                        &::after {
                            content: " ";
                            position: absolute;
                            bottom: 0;
                            left: 50%;
                            transform: translateX(-50%);
                            height: 4rpx;
                            width: 30rpx;
                            border-radius: 6rpx;
                            background-color: #fff;
                        }
                    }
                }
            }

            .category {
                box-shadow: #eee -16rpx 0 16rpx -16rpx;
                height: 58rpx;
                font-size: 28rpx;
                padding-left: 25rpx;
            }
        }
    }

    &__main {
        position: relative;
        z-index: 99;
    }

    .WANL-MODAL {
        .cu-modal {
            &.top-modal {
                background: rgba(0, 0, 0, 0.6);
                text-align: inherit;

                .cu-dialog {
                    background: #fff;
                    border-radius: 0 0 18rpx 18rpx;

                    .category {
                        display: grid;
                        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
                        grid-auto-flow: row dense;
                        grid-gap: 16rpx;

                        .item {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            padding: 12rpx 0;
                            border: 2rpx solid transparent;

                            &.action {
                                background-color: transparent;
                                border-color: #f40;
                                color: #f40;
                                font-weight: bold;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
